<style>

</style>

<template>


  <div class="user">
    <el-tabs v-model="activeTab" type="card" style="width: 1300px;border: none">
      <!--          模糊查询-->
      <el-form ref="form" :model="form2" label-width="30px">
        <el-form-item label="">
          骑手ID：
          <el-input v-model="form2.id" style="margin-right: 30px;width: 200px"></el-input>
          真实姓名：
          <el-input v-model="form2.name" style="margin-right: 20px;width: 200px"></el-input>
          手机号码：
          <el-input v-model="form2.tel" style="margin-right: 20px;width: 200px"></el-input>
          工作城市：
          <el-cascader
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions">
          </el-cascader>

        </el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button v-show="activeTab!='healthArchives'" type="primary" @click="findAllCouriers">搜索</el-button>
        <el-button v-show="activeTab=='healthArchives'" type="primary" @click="findAllAudit">搜索</el-button>
      </el-form>
      <br><br>
      <el-button v-show="activeTab!='healthRecords'" type="primary" @click="dialogFormVisible5=true">添加配送员
      </el-button>


      <el-tab-pane label="骑手招募审核" name="healthArchives">
        <el-card style="border-color: white">

          <!--          表格部分-->
          <el-table :data="tableDataAudit" style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="真实姓名"></el-table-column>
            <el-table-column prop="tel" label="手机号码"></el-table-column>
            <el-table-column prop="" label="审核类型">
              <template slot-scope="scope">
                {{ scope.row.type == 1 ? '注册报名' : '上传健康证' }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="工作类型">
              <template slot-scope="scope">
                {{ scope.row.gzType == 1 ? '全职转送' : '兼职众包' }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="工作城市"></el-table-column>
            <el-table-column prop="" label="来源">
              <template slot-scope="scope">
                {{ scope.row.ly == 1 ? '骑手App' : '外卖App' }}
              </template>
            </el-table-column>
            <el-table-column prop="commitTime" label="最近提交时间"></el-table-column>
            <el-table-column prop="shTime" label="最近审核时间"></el-table-column>
            <el-table-column prop="" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.status == 1 ? '待审核' : scope.row.status == 2 ? '审核通过' : scope.row.status == 3 ? '审核拒绝' : ''
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    v-show="scope.row.status==1"
                    type="text"
                    size="small"
                    @click="auditXq(scope.row)"
                >查看并处理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="current1"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1">
          </el-pagination>
        </el-card>


        <el-dialog title="添加配送员" :visible.sync="dialogFormVisible5">
          <el-form :model="psy">
            <el-form-item label="真实姓名">
              <el-input v-model="psy.name"  style="width: 500px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="psy.tel" type="number" style="width: 500px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作类型">
              <el-radio-group v-model="psy.gzType">
                <el-radio label="1">全职专送</el-radio>
                <el-radio label="2">兼职众包</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="工作城市">
              <el-cascader
                  size="large"
                  :options="pcaTextArr"
                  v-model="ruleForm.locations">
              </el-cascader>
            </el-form-item>

            <el-form-item label="工作地点">

              <el-autocomplete
                  v-model="keywords"
                  style="width: 300px"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @blur="hqzd2"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="所属站点：">
              <el-select v-model="psy.did" placeholder="请选择站点" style="width: 200px">
                <el-option label="全部" :value="0"></el-option>
                <el-option v-for="item in distributionstations2" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible5 = false;qx()">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible5 = false;addPsy()">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>


      <el-tab-pane label="所有配送员" name="healthRecords">
        <el-card style="border-color:white">
          <!--          表格部分-->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="" label="ID" width="60px">
              <template slot-scope="scope">
                <span @click="couriersXq(scope.row)">{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="真实姓名"></el-table-column>
            <el-table-column prop="tel" label="手机号码"></el-table-column>
            <el-table-column prop="" label="工作类型">
              <template slot-scope="scope">
                {{ scope.row.type == 1 ? '全职专送' : scope.row.type == 2 ? '外卖众包' : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="工作城市"></el-table-column>
            <el-table-column prop="dname" label="所属站点"></el-table-column>
            <el-table-column prop="count" label="90日完成单"></el-table-column>
            <el-table-column prop="score" label="评分"></el-table-column>
            <el-table-column prop="authentication" label="实名认证">
              <template slot-scope="scope">
                {{ scope.row.authentication == 1 ? '未认证' : '已认证' }}
              </template>
            </el-table-column>
            <el-table-column prop="enrollTime" label="注册时间"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.status == 1 ? '未开通' : scope.row.status == 2 ? '接单中' : scope.row.status == 3 ? '休息中' : scope.row.status == 4 ? '已禁用' : scope.row.status == 5 ? '已离职' : '已注销'
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160px">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.status !=4"
                    @click=";dialogFormVisible=true;lockk(scope.row)"
                >锁定用户
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.status === 4"
                    @click="dialogFormVisible2=true;unlockk(scope.row)"
                >解锁用户
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.did!=0"
                    @click="dialogFormVisible3=true;hqzd(scope.row);lockk(scope.row)"
                >解绑站点
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.did==0"
                    @click="dialogFormVisible4=true;unlockk(scope.row)"
                >绑定站点
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>


          <!--          锁定账号的弹出框-->
          <el-dialog title="确定锁定该配送员？" :visible.sync="dialogFormVisible">
            用户账号被锁定后将无法接受配送订单、请谨慎操作！<br>
            <el-form :model="lockUser" style="margin-top: 25px">
              <el-form-item label="锁定原因：" style="width: 300px">
                <el-select v-model="lockUser.lockk" placeholder="请选择原因" style="width: 200px">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="账号出现问题" value="1"></el-option>
                  <!--        <el-option label="" value="1"></el-option>-->
                </el-select>
              </el-form-item>
              <el-form-item label="补充说明：">
                <el-input placeholder="请输入" v-model="lockUser.supplement" style="width: 600px"></el-input>
                0/200（选填）
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
            </div>
          </el-dialog>


          <!--          解锁的弹框-->
          <el-dialog title="确定解锁该用户？" :visible.sync="dialogFormVisible2">
            用户解锁后将恢复下单、评价、请谨慎操作！<br>
            <div slot="footer" class="dialog-footer" style="margin-top: 20px">
              <el-button @click="dialogFormVisible2 = false;qx()">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible2 = false;qd()">确 定</el-button>
            </div>
          </el-dialog>


          <!--          解绑站点的弹出框-->
          <el-dialog title="确定解绑站点关系？" :visible.sync="dialogFormVisible3">
            配送员与站点解绑后变为离职状态、请谨慎操作！<br>
            <el-form :model="lockUser" style="margin-top: 25px">
              <el-form-item label="骑手姓名：">
                <el-input placeholder="请输入" v-model="lockUser.name" disabled style="width: 600px"></el-input>
              </el-form-item>
              <el-form-item label="当前站点：">
                <el-input placeholder="请输入" v-model="distributionstations.address+distributionstations.name" disabled
                          style="width: 500px"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible3 = false;qx()">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible3 = false;jb()">确 定</el-button>
            </div>
          </el-dialog>


          <!--          绑定站点-->
          <el-dialog title="确定与站点绑定关系？" :visible.sync="dialogFormVisible4">
            配送员绑定站点后将入职并接受配送订单，请谨慎操作！<br>
            <div slot="footer" class="dialog-footer" style="margin-top: 20px">
              <el-form :model="lockUser" style="margin-top: 25px;text-align: left">
                <el-form-item label="骑手姓名：">
                  <el-input placeholder="请输入" v-model="lockUser.name" disabled style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="工作城市：">
                  <el-cascader
                      size="large"
                      :options="pcaTextArr"
                      v-model="selectedOptions3"
                      @change="hqzd2()">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="所属站点：">
                  <el-select v-model="lockUser.did" placeholder="请选择站点" style="width: 200px">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option v-for="item in distributionstations2" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-button @click="dialogFormVisible4 = false;qx()">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible4 = false;bd()">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-tab-pane>


    </el-tabs>
  </div>
</template>


<script>
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  securityJsCode: "558d28e386d1e6ee25d43e233f28a0ff",
};

import {

  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";


export default {
  data() {
    return {
      distributionstations: {},
      distributionstations2: [],
      psy: {},
      activeTab: 'healthArchives',
      form2: {},
      tableData: [
        // 这里是你的数据，格式与截图中的数据相同
      ],
      tableDataAudit: [],
      current: 1,
      pageSize: 10,
      total: 0,
      current1: 1,
      pageSize1: 10,
      total1: 0,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      lockUser: {},
      pcaTextArr,
      selectedOptions: [],
      selectedOptions2: [],
      selectedOptions3: [],
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      keywords: "",
      auto: null,
      placeSearch: null,
      ruleForm: {},
      map: null,
      // 标记点
      marker: null,
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      //缩放控件
      ToolBar: null,
      //地图放大镜
      HawkEye: null,
      //比例尺
      Scale: null,
      //图层切换
      MapType: null,
      Geolocation: null,
      form: {
        lng: 116.157102,
        lat: 40.134066,
        address: '',
      },
      driving: null,
      startKeywords: "",
      endKeywords: "",
      startLocation: null,
      endLocation: null,
      routeDetails: null,
      // 搜索节流阀
      loading: false,
      options: [],
      foodMarkers: [],


    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.findAll();
    },
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.findAllUser();
    },
    handleCurrentChange1(val) {
      this.current1 = val;
      this.findAllUser();
    },


    //   查询所有配送员
    findAllCouriers() {
      if (this.selectedOptions.length != 0) {
        this.form.address = this.selectedOptions[2];
      }
      this.axios.post(`http://localhost:8000/xm-client/xm-couriers/findAll?current=${this.current}&pageSize=${this.pageSize}`, this.form2).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (this.current > res.data.data.pages) {
          this.current = res.data.data.pages;
          this.findAllCouriers();
        }
      })
    },

    //   查询审核的配送员
    findAllAudit() {
      this.axios.post(`http://localhost:8000/xm-client/xm-auditcouriers/findAll?current=${this.current1}&pageSize=${this.pageSize1}`, this.form2).then(res => {
        this.tableDataAudit = res.data.data.records;
        this.total1 = res.data.data.total;
        if (this.current1 > res.data.data.pages) {
          this.current1 = res.data.data.pages;
          this.findAllAudit();
        }
      })
    },




    //   锁定账号
    lockk(row) {
      this.lockUser = row;
    },

    //   解锁账号
    unlockk(row) {
      // this.dialogFormVisible2 = true;
      this.lockUser = row;
    },

    //   取消弹框里的数据
    qx() {
      this.lockUser = {};
      this.distributionstations2=[];
      this.selectedOptions3 = [];
      this.keywords="";
      this.ruleForm.locations="";
      this.psy={};
    },

    //   锁定/解锁用户的方法
    qd() {
      if (this.lockUser.lockk == null) {
        this.$message({
          message: '请选择锁定原因',
          type: 'warning'
        });
        this.dialogFormVisible = true
        return;
      }
      if (this.lockUser.status != 4) {
        this.lockUser.status = 4;
      } else {
        this.lockUser.lockk = "";
        this.lockUser.supplement = '';
        this.lockUser.status = 3;
      }

      this.axios.post(`http://localhost:8000/xm-client/xm-couriers/lockk`, this.lockUser).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        this.qx();
        this.findAllCouriers();
      })
    },


    //   跳转到审核详情页面
    auditXq(row) {
      this.$router.push({path: '/auditCouriers', query: {id: row.id}})
    },


    // 解绑站点的方法
    jb() {
      if (this.lockUser.did != 0) {
        this.axios.post(`http://localhost:8000/xm-client/xm-couriers/updateCourier`, this.lockUser).then(res=>{})
        this.lockUser.did = 0;
        this.lockUser.status = 5;
      }
      this.axios.post(`http://localhost:8000/xm-client/xm-couriers/jb`, this.lockUser).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '解绑成功',
            type: 'success'
          });
          this.findAllCouriers();
        }
      })
    },

    // 绑定配送站的方法
    bd() {
      this.lockUser.status = 3;
      this.axios.post(`http://localhost:8000/xm-client/xm-couriers/updateCourier2`, this.lockUser).then(res=>{})
      this.axios.post(`http://localhost:8000/xm-client/xm-couriers/jb`, this.lockUser).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '绑定成功',
            type: 'success'
          });
          this.findAllCouriers();
        }
      })
    },


    // 获取站点的信息
    hqzd(row) {
      this.axios.post(`http://localhost:8000/xm-client/xm-distributionstations/findById?id=${row.did}`,).then(res => {
        this.distributionstations = res.data.data;
      })
    },

    // 根据名称获取站点
    hqzd2() {
      alert(111)
      var name2=null;
      if(this.selectedOptions3.length!=0){
        var name = this.selectedOptions3[2]
      }
      if(this.ruleForm.locations!=0){
        name2=this.ruleForm.locations[2];
      }
      if(this.keywords!=""){
        var name = this.keywords;
      }
      this.axios.post(`http://localhost:8000/xm-client/xm-distributionstations/findByName?name=${name}&name2=${name2}`,).then(res => {
        this.distributionstations2 = res.data.data;
      })
    },

    // 跳转配送员详情
    couriersXq(row) {
      localStorage.setItem("couriers", JSON.stringify(row));
      this.$router.push("/couriersXq");
    },


    // 重置方法
    reset(){
      this.form2 = {};
    },

    //  添加配送员的方法
    addPsy(){
      this.psy.address=this.ruleForm.locations[0]+this.ruleForm.locations[1]+this.ruleForm.locations[2];
      this.psy.xxAddress=this.keywords;
      this.psy.status=1;
      this.axios.post(`http://localhost:8000/xm-client/xm-auditcouriers/add`, this.psy).then(res=>{
        if(res.data.code==200){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.dialogFormVisible5=false;
          this.findAllCouriers();
        }
      })
    },


    initMap() {
      AMapLoader.load({
        key: "2006c959534778aa1708e08ff871a437",
        version: "2.0",
        plugins: ["AMap.Geocoder", "AMap.AutoComplete", "AMap.ToolBar", "AMap.HawkEye", "AMap.Driving", "AMap.Scale", "AMap.MapType", "AMap.Geolocation", 'AMap.PlaceSearch'],
      }).then((AMap) => {
      }).catch((err) => {
        console.error(err);
      });
    },

    querySearchAsync(queryString, cb) {
      if (queryString) {
        // this.ruleForm.locations = this.ruleForm.locations.toString();
        // this.ruleForm.locations = this.ruleForm.locations.replace(/,/g, '');
        AMap.plugin(["AMap.Autocomplete"], () => {
          const autoOptions = {
            city: this.ruleForm.locations,
            input: queryString,
          };
          const autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(queryString, (status, result) => {
            if (status === "complete" && result.tips) {
              this.options = result.tips.map((tip) => ({
                value: tip.name,
                location: tip.location,
              }));
              console.log(this.options);
            } else {
              this.options = [];
            }
            cb(this.options);
          });
        });
      } else {
        this.options = [];
        cb(this.options);
      }
    },

  },


  mounted() {
    this.initMap();
  },

  created() {
    this.findAllCouriers();
    this.findAllAudit();
  }

}
</script>